import React, {Component} from 'react';
import './index.css'
class Item extends Component {
    state = {isShow:false}
    show=()=>{
        this.setState({isShow:true})
    }
    hide=()=>{
        this.setState({isShow:false})
    }
    render() {
        const {todo} = this.props
        return (
            <li onMouseEnter={this.show} onMouseLeave={this.hide} >
                <label>
                    <input type="checkbox" checked={todo.isChecked} onChange={()=>this.props.handleIschecked(todo.id)}/>
                    <span>{todo.name}</span>
                </label>
                <button className="btn btn-danger" onClick={()=>this.props.deleteTodo(todo.id)} style={{display:this.state.isShow? 'block':'none'}}>删除</button>
            </li>
        );
    }
}

export default Item;